<template>
  <div class="home">
    <app-bar title="Todo" left="bars" right="search"></app-bar>
    <avatar></avatar>
    <todo-list></todo-list>
    <todo-detail></todo-detail>
    <todo-editing></todo-editing>
    <floating-button />
    <gradient></gradient>    
  </div>
</template>

<script>
// @ is an alias to /src
import AppBar from "../components/AppBar";
import Avatar from "../components/Avatar";
import Gradient from "../components/Gradient";
import TodoList from "../components/TodoList";
import TodoDetail from "../components/TodoDetail";
import FloatingButton from "../components/FloatingButton.vue";
import TodoEditing from "../components/TodoEditing.vue";


export default {
  name: "home",
  components: {
    AppBar,
    Avatar,
    Gradient,
    TodoList,
    TodoDetail,
    FloatingButton,
    TodoEditing
  }
};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
  // background: rgba(85, 53, 77,.7);
  display: flex;
  flex-direction: column;
  align-content: space-around;
  
}
</style>
